

<template>
  <div style="width: 90%;
    margin: auto;
    margin-top: 5rem;">
    <el-form
        ref="loginFormRef"
        style="width: 90%;"
        :model="loginForm"
        :rules="loginFormRules"
        label-width="auto"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username" />
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" type="password"  show-password
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login('loginFormRef')">
          登录
        </el-button>

        <el-button @click="register">注册</el-button>
        <span
            @click="forgot"
            style="    right: 0;
    position: absolute;">忘记密码?</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getTestApi, getMsgListApi, sendMsgApi, login as loginApi } from "@/api/webApi.js"
import { ElButton, ElMessage, ElLoading } from "element-plus"
import { Position, Picture } from "@element-plus/icons-vue"
import { dateFormatForList, scrollToBottom } from "@/utils/common.js"
import BaseListComponent from "@/pages/BaseListComponent.js"
import { reactive, ref } from 'vue'
import  { FormInstance, FormRules } from 'element-plus'
import {mapGetters} from "vuex";

export default {
  name: "AppLogin",
  components: {
    Position,
    Picture,
  },
  mixins: [BaseListComponent],
  setup() {},
  created() {},
  mounted() {
    // let menu = document.getElementById('menu')
    // menu.style.top = 1000 +'px'
  },
  computed:{
    ...mapGetters(['isAuthenticated'])
  },
  methods: {
   async login(formName){
      console.log(this.loginForm)

      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log('valid submit!!');
          const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })
         await this.$store.dispatch('login', this.loginForm).then(res=>{
           console.log('this.$store.dispatch(\'login\', this.loginForm)',res)
           let { code, msg, data } = res
           if(this.isAuthenticated){
             this.$router.push('/user')
           }
           debugger
          }).finally(()=>{
           console.log('this.$store.dispatch(\'login\', this.loginForm) finally')
           setTimeout(()=> {
             loading.close()
           },1000)

         })
          // loginApi(this.loginForm).then((res)=>{
          //   console.log('loginApi res',res)
          //   let { code, msg, data } = res
          //   this.store.dispatch('')
          //   debugger
          // }).catch(err=>{})
          //     .finally(()=>{
          //       console.log('finally')
          //     })

        } else {
          console.log('error submit!!');
          return false;
        }
      });


      // login(this.loginForm).then((res)=>{
      //   let { code, msg, data } = res
      //
      // }).catch(err=>{})
      //     .finally(()=>{
      //
      //     })
    },
    register(){},
    forgot(){}
  },
  data() {
    return {
      loginForm: {
        username:'',
        password:''
      },
      loginFormRules: {
        username:[ { required: true, message: 'Please input User Name', trigger: 'blur' },],
        password:[ { required: true, message: 'Please input Password', trigger: 'blur' },]
      }
    }
  },
}
</script>


<style scoped>

</style>